<template>
	<view class="my-page-color">
		<view class="padding36 bg-white mb15">
			<view class="step-con ">
				<view class="step-item boder-l">
					<view class="mb30">
						<span class="color-orange f33">
							{{complaint.status == 1 ?'损坏已赔付':'损坏待赔付'}}
						</span>
						<span class="grey-tips ml10">{{$timestampToTime(complaint.updated_at, 1)}}</span>
					</view>
					<view class="grey-tips mb30">
						赔偿金额{{complaint.penalty}}加元，该费用从押金中扣除
					</view>
					<view v-if="complaint.penalty< orderData.deposit" @click="goPage" class="color-orange f26">
						查看押金退款详情 >
					</view>
				</view>
				<view class="step-item dot2">
					<view>
						<span class="color-orange f33">提交申请</span>
						<span class="grey-tips ml10">{{$timestampToTime(complaint.created_at,1)}}</span>
					</view>
				</view>
			</view>
		</view>

		<view class="padding36 bg-white mb15">
			<view class="des-item">
				<view class="title item">投诉单号</view>
				<view class="grey-tips item">{{complaint.complaint_number}}</view>
			</view>
			<view class="des-item">
				<view class="title item">投诉原因</view>
				<view class="grey-tips item">{{complaint.description}}</view>
			</view>
			<view class="des-item">
				<view class="title item">赔偿金额</view>
				<view class="grey-tips item">{{complaint.penalty}}</view>
			</view>
			<view class="des-item">
				<view class="title item">具体说明</view>
				<view class="grey-tips item">{{complaint.detail || '无'}}</view>
			</view>
			<view class="des-item">
				<view class="title item"></view>
				<view class="grey-tips item">
					<van-image
					 class="des-img"
					  v-for="(item, index) in complaint.pic_urls" :key="index"
					  :src="item"
					  fit="cover"
					/>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				complaint: this.$getStorage('orderData').complaint,
				orderData: this.$getStorage('orderData')
			}
		},
		methods: {
			goPage() {
				this.$goPage(1, '/subOrder/refundDetail')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.step-con {
		padding: 40rpx 0;

	}

	.step-item {
		font-size: 29rpx;
		color: #444444;
		text-indent: 40rpx;
		line-height: 26rpx;
		position: relative;
		padding-bottom: 30rpx;

		& ::before {
			content: '';
			width: 25rpx;
			height: 25rpx;
			background: #EC8403;
			border-radius: 50%;
			display: inline-block;
			vertical-align: middle;
			position: absolute;
			left: -12.5rpx;
			top: 0rpx;
		}
	}

	.boder-l {
		border-left: 1px solid #939393;
	}

	.dot2 {
		& ::before {
			background: #D9D9D9;

		}
	}

	.des-item {
		.item {
			display: inline-block;
			vertical-align: top;
			margin-bottom: 40rpx;
			font-size: 29rpx;
		}

		.title {
			width: 145rpx;
		}
		.grey-tips {
			width: 520rpx;
			font-size: 29rpx;
		}
		.des-img {
			width: 210rpx;
			height: 133rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 1rpx solid #EBEBEB;
		}

	}
</style>